/* code Javascript 
 * Jeu des balles */
    
$(function(){  
    init();
}); 

function init(){
    // STRUCTURE
    
     
    // DONNEES
    // tableau Couleurs des balles id = couleur, en hexa
    listeCouleurs = new Array();
    listeCouleurs[0] = ["rouge","#ff0000"];
    listeCouleurs[1] = ["verte","#00ff00"];
    listeCouleurs[2] = ["bleue","#0000ff"];  
    /// tableau Tailles des balles (id = rayon, taille
    listeTailles = new Array();
    listeTailles[0] = ["5","petite"];
    listeTailles[1] = ["10","moyenne"];
    listeTailles[2] = ["20","grande"];      
    /// tableau Niveaux (id = id couleur,id taille)
    listeNiveaux = new Array();
    listeNiveaux[0] = [0,0]; //rouge petite
    listeNiveaux[1] = [1,1]; //vert moyenne
    listeNiveaux[2] = [1,2]; //vert grande
    listeNiveaux[3] = [2,1]; // bleu moyenne
    listeNiveaux[4] = [2,2]; //bleu grande

    // tableau des balles (id = 0-id niveau, 1-id couleur, 2-id taille, 3-position/x, 4-vitesse, 5-position/y, 6-visible)
    listeBalles = new Array();
    listeBalles[0] = [0,0,0,100,1,10,1];
    listeBalles[1] = [0,1,1,150,2,20,1];
    listeBalles[2] = [0,2,2,180,1,15,1];
    listeBalles[3] = [1,2,2,150,3,10,1];
    listeBalles[4] = [1,1,1,100,1,30,1];
    listeBalles[5] = [1,0,1,280,2,50,1];
    listeBalles[6] = [2,0,1,70,1,10,1];
    listeBalles[7] = [2,1,1,250,2,20,1];
    listeBalles[8] = [2,2,2,180,1,15,1];
    listeBalles[9] = [3,1,2,50,3,10,1];
    listeBalles[10] = [3,2,0,100,1,30,1];
    listeBalles[11] = [3,0,1,280,2,50,1];
    listeBalles[12] = [4,0,0,200,1,10,1];
    listeBalles[13] = [4,2,2,50,2,20,1];
    listeBalles[14] = [4,2,0,180,1,15,1];


    
  

    
    // VARIABLES
    tempsJeu=0;
    niveauCourant = 1;
    ecranCourant = 'accueil';
    nbPoints = 0;
    // GESTIONNAIRES
    
    // REGLES
    
    // LANCEMENT
   afficheAccueil();
}
function afficheAccueil(){
/* 
•  met à jour la variable ecranCourant (ecranCourant=''accueil'';),
• affiche l'écran #accueil:
    le texte du titre (une chaîne de caractères)
    le code de l'image du jeu
    le texte expliquant les règles,
    le code du bouton #boutonJeu
• masque les autres écrans
 */

        
    ecranCourant='accueil';

    $('#titre').show();
    $('#titre').html('<p>Clic sur les balles</p>');
    $('#texte').show();
    $('#texte').html('Dans chacun des niveaux de jeu, cliquer sur les balles correspondant à la consigne affichée avant qu\'elles touchent le bas du cadre !');
    $('#monImage').show();
    $('#monImage').attr( "alt", "(ici, plus tard une image du jeu)" );
    //$('#monImage').attr( "src", "./images/smiley.jpg" );
    $('#monImage').attr( "src", "" );
    $('#boutonJ').show();
       
    cacheJeu();
    cacheBilan();


}
function cacheAccueil(){
    $('#titre').hide();
    $('#texte').hide();
    $('#monImage').hide();
    $('#boutonJ').hide();
}
function cacheJeu(){
    $('#consigne').hide();
    $('#heure').hide();    
    $('#animation').hide();
    $('#dessin').hide();
    $('#boutonQ').hide();
}
function cacheBilan(){
    $('#recap').hide();
    $('#boutonA').hide();
    $('#boutonR').hide();
}
function fonctionJouer(){
    afficheJeu();
}
function afficheJeu(){
   /* on définit :
• le texte pour la consigne,
• le code du canvas,
• le code du bouton #boutonQuitter. */
    if (ecranCourant == 'bilan'){
        nbPoints = 0;
        niveauCourant = 1;
    }
    ecranCourant='jeu';
    
    cacheAccueil();

    // relance du timer 
    timerIni = 0;
    inter = setInterval(Horloge, 1000);
    idNiveau = niveauCourant-1;
    $('#consigne').show();
    $('#consigne').html(afficheConsigne(idNiveau));
    $('#heure').show();
    $('#heure').html(' ');
    $('#boutonJ').hide();

    $('#animation').show();
    $('#dessin').show();
    $('#boutonQ').show();
    cacheBilan();
    
    // canvas
    monCanvas = document.getElementById('dessin');
    if (monCanvas.getContext){
        ctx = monCanvas.getContext('2d');
        // incrément
        iCanvas = 0;
    } else {
            alert('canvas non supporté par ce navigateur');
    }
    // détermination des niveau pour les cercles
    
    switch(niveauCourant) {
    case 1:
        idBallesInit = 0;
        break;
    case 2:
        idBallesInit = 3;
        break;
    case 3:
        idBallesInit = 6;
        break;
    case 4:
        idBallesInit = 9;
        break;
    case 5:
        idBallesInit = 12;
        break;
    default:
        break;
    }  
    
    
    // cercles = tableau de 3 tableaux
    //cercles = [[position/x,0,position/y,cliqué=0,couleur,vitesse,bonneballe=1],...]
    cercles = [
        [listeBalles[idBallesInit][3],0,listeBalles[idBallesInit][5],1,listeCouleurs[listeBalles[idBallesInit][1]][1],listeBalles[idBallesInit][4],0],
        [listeBalles[idBallesInit+1][3],0,listeBalles[idBallesInit+1][5],1,listeCouleurs[listeBalles[idBallesInit+1][1]][1],listeBalles[idBallesInit+1][4],0],
        [listeBalles[idBallesInit+2][3],0,listeBalles[idBallesInit+2][5],1,listeCouleurs[listeBalles[idBallesInit+2][1]][1],listeBalles[idBallesInit+1][4],0],
              ];
    
    var indice = 0;
    var b1 = idBallesInit;
    var b3 = idBallesInit+2;
    //alert('idBallesInit : '+b1);
    //alert('idBallesFin : '+b3);
    
    for (var b=b1; b<=b3; b++){
        
        couleurBalle = listeBalles[b][1]+1;
        couleurNiveau = listeNiveaux[listeBalles[b][0]][0]+1;
        tailleBalle = listeBalles[b][2]+1;
        tailleNiveau = listeNiveaux[listeBalles[b][0]][1]+1;
        //alert('couleurBalle = couleurNiveau ' +couleurBalle+' '+listeNiveaux[listeBalles[b][0]][0]);
        //alert('tailleBalle = tailleNiveau '+listeBalles[b][2]+' '+listeNiveaux[listeBalles[b][0]][1]);
        // comparasion 0=0 retourne toujours faux
        if ((couleurBalle == couleurNiveau) && (tailleBalle = tailleNiveau)) {     
              cercles[indice][6] = 1;
              //alert('cercle '+indice);
        }
        indice = indice +1;
        //alert('indice ' + indice);
    }


    // timer
    interCanvas = setInterval(Animer, 100);	
    setTimeout(Stopper, 20000);

    // interactivité sur le canvas
    monCanvas.addEventListener("click", clicCanvas, false);	
}

function afficheConsigne(idNiveau){
    // construire la consigne à partir du niveau de jeu
    if (niveauCourant<=5){                     
        consigne = '<p>Clic sur les balles de couleur ';
        consigne = consigne + listeCouleurs[listeNiveaux[idNiveau][0]][0];
        consigne = consigne + ' et de taille ';
        consigne = consigne + listeTailles[listeNiveaux[idNiveau][1]][1];
        consigne = consigne + '</p>';
    }
    return consigne;
}   

function fonctionQuitter(){
    afficheAccueil();
}   

// clic sur le canvas
function clicCanvas(e){
        // position de la souris / document
        var xSourisDocument = e.pageX; 
    var ySourisDocument = e.pageY;
        // position du canvas / document
        var xCanvas = monCanvas.offsetLeft;
        var yCanvas = monCanvas.offsetTop;
        // position du clic / canvas
        xSourisCanvas = xSourisDocument - xCanvas;
        ySourisCanvas = ySourisDocument - yCanvas;
        // test si un cercle est cliqué
        for (var c=0; c<cercles.length; c++){
                var R = cercles[c][2];
                if(Math.abs(cercles[c][0]-xSourisCanvas) < R
                        && Math.abs(cercles[c][1]-ySourisCanvas) < R){
                        cercles[c][3]=0;
                        listeBalles[c][6]=0;
                        // on passe au niveau suivant et on marque un point si on a cliqué sur le bon cercle
                        if (cercles[c][6] == 1){
                            nbPoints = nbPoints+1;
                            
                            tempsJeu = tempsJeu + timerIni;    
                            
                        }
                        niveauCourant = niveauCourant + 1
                        if (niveauCourant<=5){
                            afficheJeu();
                        }
                        else {
                            afficheBilan();
                        }
                        /* le break qui suit appelle une réflexion que je vous soumettrai à la fin de la semaine 7 */
                        break;
                }
        }
}

// fonction de dessin
function Animer() {
        // incrémentation
        iCanvas++;		
        // composition
        ctx.globalCompositeOperation = 'lighter';	
        // effaçage
        ctx.clearRect(0,0, monCanvas.width,monCanvas.height);
        // translation du contexte et dessin d'une balle
        //dessineBalle(0,2);
        dessineBalle(0);
        // translation du contexte et dessin d'une balle
        //dessineBalle(1,1);
        dessineBalle(1);
        // translation du contexte et dessin d'une balle
        //dessineBalle(2,3);
        dessineBalle(2);

}
// fonction d'arrêt
function Stopper() {
        clearInterval(interCanvas);
}
// dessin d'une balle : x départ, vitesse / y, rayon
function dessineBalle(idCercle){
    v=cercles[idCercle][5];
    if(cercles[idCercle][3]==1){
        // sauvegarde de l'état du contexte
        ctx.save();
        // dessin
        var R = cercles[idCercle][2];
        cercles[idCercle][1]= v*iCanvas;
        ctx.translate(cercles[idCercle][0],v*iCanvas);
        ctx.beginPath();
        ctx.arc(0, 0, R, 0, 2 * Math.PI, false);
        //ctx.fillStyle = 'green';
        ctx.fillStyle = cercles[idCercle][4];
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#003300';
        ctx.stroke();		
        // retour à l'état précédent du contexte
        ctx.restore();
    }
}
function afficheBilan(){
    
    ecranCourant='bilan';
    clearInterval(inter);
    cacheAccueil();
    cacheJeu();
    niveau = niveauCourant -1 ;
    $('#recap').show();
    $('#recap').html('Durée du jeu : ' + tempsJeu +' secondes.<br>Nombre de points obtenus : ' + nbPoints);
    $('#boutonA').show();
    $('#boutonR').show();
    
}
function fonctionRejouer(){
    afficheJeu();
} 
function fonctionAccueil(){
    afficheAccueil();
} 
/* fonction pour le timer */
function Horloge() {
    if(timerIni < 60){
        timerIni++;
        $('#heure').html(timerIni);
    } else 
        afficheBilan();
}